<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的计算属性和侦听器</title>
    <script src="../../assets/vue.js"></script>
</head>
<body>
    <div id="root">
        <div>first name: <input v-model="firstName"></div>
        <div>last name: <input v-model="lastName"></div>
        <div>Your name is: <strong>{{firstName + ' ' + lastName}}</strong></div>
        <div>
            Your full name is : <strong>{{fullName}}</strong> 
            and reverse name is <strong>{{reverseName}}</strong>
        </div>
         <div>修改姓名次数：{{count}}次</div>
    </div>
    <script>
        new Vue({
            el: '#root',
            data:{
                firstName: "hello",
                lastName: "World",
                count: 0
            },
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName
                },
                reverseName: function() {
                    return this.fullName.split('').reverse().join('')
                }
            },
            watch: {
                // 尝试只监听fullName   
                firstName: function() {
                    this.count ++
                },
                lastName: function() {
                    this.count++
                }
            }
        })
    </script>
</body>
</html>